<template>
  <div class="left">
    <el-menu background-color="#334154" text-color="#8e99a8" active-text-color="#fff" unique-opened
      :default-active="active" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
      :collapse="$store.state.isCollapse">
      <template v-for="(item, index) in user.role == 1?menuData:adminMenu">
        <el-menu-item style="font-weight:bold;" v-if="item.child == null" :index="item.path" :key="index"
          @click="change(item.path)">
          <i style="font-weight:bold;" :class="item.icon"></i>
          <span style="font-weight:bold;" slot="title">{{ item.name }}</span>
        </el-menu-item>

        <el-submenu v-else :index="item.path" :key="index">
          <template slot="title">
            <i style="font-weight:bold;" :class="item.icon"></i>
            <span style="font-weight:bold;" slot="title">{{ item.name }}</span>
          </template>
          <el-menu-item style="font-weight:bold;" v-for="(value, key) in item.child" :index="value.path" :key="key"
            @click="change(value.path)">
            <i style="font-weight:bold;" :class="value.icon"></i>
            <span style="font-weight:bold;" slot="title">{{ value.name }}</span>
            <!-- {{value.name }} -->
          </el-menu-item>
        </el-submenu>
      </template>


    </el-menu>
  </div>
</template>

<script>
  import router from "@/router";
  export default {
    name: "LeftNavigation",
    data () {
      return {
        user: JSON.parse(localStorage.getItem('user')),
        menuData: [
          {
            name: "首页",
            path: "/home",
            icon: "el-icon-s-home",
          },
          {
            path: "/file",
            name: "资源库",
            icon: "el-icon-files",
            child: [
              {
                name: "所有文件",
                path: "/all",
                icon: "el-icon-menu",
              },
              {
                name: "文档文件",
                path: "/document",
                icon: "el-icon-document",
              },
              {
                name: "图片文件",
                path: "/ImageView",
                icon: "el-icon-picture-outline-round",
              },
              {
                name: "视频文件",
                path: "/video",
                icon: "el-icon-video-camera-solid",
              },
              {
                name: "其他文件",
                path: "/orther",
                icon: "el-icon-collection",
              },
            ],
          },
          {
            name: "上传/创建/共享",
            path: "/create",
            icon: "el-icon-upload",
          },
          {
            name: "文件夹管理",
            path: "/folder",
            icon: "el-icon-folder-opened",
            child: [
              {
                name: "我的文件夹",
                path: "/folders",
                icon: "el-icon-folder",
              },
              {
                name: "我的共享",
                path: "/shareFolder",
                icon: "el-icon-share",
              },
              {
                name: "获取共享文件",
                path: "/getShare",
                icon: "el-icon-position",
              },
            ],
          },
          {
            name: "回收站",
            path: "/recycling",
            icon: "el-icon-delete-solid",
          },
        ],
        adminMenu: [
          {
            name: "首页",
            path: "/adminHome",
            icon: "el-icon-s-home",
          },
          {
            name: "用户管理",
            path: "/userManage",
            icon: "el-icon-user-solid",
          },
          {
            name: "管理员管理",
            path: "/adminManage",
            icon: "el-icon-s-custom",
          },
          {
            name: "空间管理",
            path: "/storageManage",
            icon: "el-icon-pie-chart",
          },
          {
            name: "资源管理",
            path: "/resManage",
            icon: "el-icon-receiving",
          },
          {
            name: "回收站管理",
            path: "/recyelingManage",
            icon: "el-icon-delete-solid",
          },
        ]
      };

    },
    methods: {
      handleOpen (key, keyPath) {
      },
      handleClose (key, keyPath) {
      },
      change (path) {
        router.push(path);
      },
    },
    computed: {
      active () {
        return this.$route.fullPath;
      }
    }
  };
</script>

<style>
  .left {
    height: 100%;
  }

  .el-menu {
    /* width: auto; */
    height: 100%;
    border-right: 1px solid #e6e6e6;
    list-style: none;
    position: relative;
    margin: 0;
    padding-left: 0;
    /* background-color: #060606; */
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>